<template>
  <div class="f">
    <h2>05-插槽</h2>
    <h3>01 - 默认插槽</h3>
    <son1>
      <template>
        I'm content
      </template>
    </son1>
    <h3>02 - 具名插槽</h3>
    <son2>
      <!-- <template v-slot:content>
        I'm content
      </template>
      <template v-slot:head>
        I'm head
      </template> -->
      <!-- 以上写法可以简写为 # -->
      <template #content>
        I'm content
      </template>
      <template #head>
        I'm head
      </template>
    </son2>
    <h3>03 - 默认插槽</h3>
    <son3>
      <template #head>head</template>
      <template #content>content</template>
      <template>default</template>
    </son3>
    <h3>04 - 作用域插槽</h3>
    <!-- 这是里面我希望只显示 name -->
    <son4></son4>
    <!-- 这是里面我希望显示 name & id -->
    <son4>
      <template slot-scope="scope">
        <ul>
          <li v-for="(item, index) in scope.list" :key="index">
            {{ item.id }} ------ {{ item.name }}
          </li>
        </ul>
      </template>
    </son4>
  </div>
</template>

<script>
export default {
  components: {
    son1: () => import('./son1.vue'),
    son2: () => import('./son2.vue'),
    son3: () => import('./son3.vue'),
    son4: () => import('./son4.vue')
  }
}
</script>

<style></style>
